summaryrefslogtreecommitdiff
path: root/opendc-web/opendc-web-ui/src/pages/projects/[project]/topologies/[topology].js
diff options
context:
space:
mode:
authorFabian Mastenbroek <mail.fabianm@gmail.com>2021-07-19 20:59:11 +0200
committerFabian Mastenbroek <mail.fabianm@gmail.com>2021-07-20 10:34:38 +0200
commit28d6d13844db28745bc2813e87a367131f862070 (patch)
tree3094cb874872d932d278d98d60f79902bf08b1a0 /opendc-web/opendc-web-ui/src/pages/projects/[project]/topologies/[topology].js
parent922c84801acf931a5a29e95a08486f6df46a1fc2 (diff)
refactor(ui): Move page components in separate files
Diffstat (limited to 'opendc-web/opendc-web-ui/src/pages/projects/[project]/topologies/[topology].js')
-rw-r--r--opendc-web/opendc-web-ui/src/pages/projects/[project]/topologies/[topology].js53
1 files changed, 5 insertions, 48 deletions
diff --git a/opendc-web/opendc-web-ui/src/pages/projects/[project]/topologies/[topology].js b/opendc-web/opendc-web-ui/src/pages/projects/[project]/topologies/[topology].js
index a1d6ac7e..f95b18ed 100644
--- a/opendc-web/opendc-web-ui/src/pages/projects/[project]/topologies/[topology].js
+++ b/opendc-web/opendc-web-ui/src/pages/projects/[project]/topologies/[topology].js
@@ -21,39 +21,28 @@
*/
import { useRouter } from 'next/router'
+import TopologyOverview from '../../../../components/topologies/TopologyOverview'
import { useProject } from '../../../../data/project'
-import { useDispatch, useSelector } from 'react-redux'
+import { useDispatch } from 'react-redux'
import React, { useEffect, useRef, useState } from 'react'
-import { configure, HotKeys } from 'react-hotkeys'
-import { KeymapConfiguration } from '../../../../hotkeys'
import Head from 'next/head'
import { openProjectSucceeded } from '../../../../redux/actions/projects'
import { AppPage } from '../../../../components/AppPage'
import {
Breadcrumb,
BreadcrumbItem,
- Bullseye,
Divider,
- Drawer,
- DrawerContent,
- DrawerContentBody,
- EmptyState,
- EmptyStateIcon,
PageSection,
PageSectionVariants,
- Spinner,
Tab,
TabContent,
Tabs,
TabTitleText,
Text,
TextContent,
- Title,
} from '@patternfly/react-core'
import BreadcrumbLink from '../../../../components/util/BreadcrumbLink'
-import MapStage from '../../../../components/topologies/map/MapStage'
-import Collapse from '../../../../components/topologies/map/controls/Collapse'
-import TopologySidebar from '../../../../components/topologies/sidebar/TopologySidebar'
+import TopologyMap from '../../../../components/topologies/TopologyMap'
/**
* Page that displays a datacenter topology.
@@ -75,11 +64,6 @@ function Topology() {
const overviewRef = useRef(null)
const floorPlanRef = useRef(null)
- const topologyIsLoading = useSelector((state) => state.currentTopologyId === '-1')
- const interactionLevel = useSelector((state) => state.interactionLevel)
-
- const [isExpanded, setExpanded] = useState(true)
-
const breadcrumb = (
<Breadcrumb>
<BreadcrumbItem to="/projects" component={BreadcrumbLink}>
@@ -94,13 +78,6 @@ function Topology() {
</Breadcrumb>
)
- const panelContent = <TopologySidebar interactionLevel={interactionLevel} onClose={() => setExpanded(false)} />
-
- // Make sure that holding down a key will generate repeated events
- configure({
- ignoreRepeatedEventsWhenKeyHeldDown: false,
- })
-
return (
<AppPage breadcrumb={breadcrumb}>
<Head>
@@ -134,7 +111,7 @@ function Topology() {
</PageSection>
<PageSection padding={activeTab === 'floor-plan' && { default: 'noPadding' }} isFilled>
<TabContent eventKey="overview" id="overview" ref={overviewRef} aria-label="Overview tab">
- Test
+ <TopologyOverview topologyId={topologyId} />
</TabContent>
<TabContent
eventKey="floor-plan"
@@ -144,27 +121,7 @@ function Topology() {
className="pf-u-h-100"
hidden
>
- {topologyIsLoading ? (
- <Bullseye>
- <EmptyState>
- <EmptyStateIcon variant="container" component={Spinner} />
- <Title size="lg" headingLevel="h4">
- Loading Topology
- </Title>
- </EmptyState>
- </Bullseye>
- ) : (
- <HotKeys keyMap={KeymapConfiguration} allowChanges={true} className="full-height">
- <Drawer isExpanded={isExpanded}>
- <DrawerContent panelContent={panelContent}>
- <DrawerContentBody>
- <MapStage />
- <Collapse onClick={() => setExpanded(true)} />
- </DrawerContentBody>
- </DrawerContent>
- </Drawer>
- </HotKeys>
- )}
+ <TopologyMap />
</TabContent>
</PageSection>
</AppPage>